<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 123px;
            height: 173px;
            background: url(imgs/colon.JPG);
        }
    </style>
</head>

<body>
    <img src="imgs/0.jpg">
    <img src="imgs/0.jpg">
    <span class="one"></span>
    <img src="imgs/0.jpg">
    <img src="imgs/0.jpg">
    <span class="two"></span>
    <img src="imgs/0.jpg">
    <img src="imgs/0.jpg">
    <script>
        //获取时间
        let imgDom = document.querySelectorAll('img');
        let timer;
        let autoTime = function () {
            //获取时间
            let time = new Date();
            let hour = time.getHours();
            let min = time.getMinutes();
            let sec = time.getSeconds();
            //小时
            imgDom[0].src = (`imgs/${parseInt(hour/10)}.jpg`);
            imgDom[1].src = (`imgs/${hour%10}.jpg`);
            //分钟
            imgDom[2].src = (`imgs/${parseInt(min/10)}.jpg`);
            imgDom[3].src = (`imgs/${min%10}.jpg`);
            //秒
            imgDom[4].src = (`imgs/${parseInt(sec/10)}.jpg`);
            imgDom[5].src = (`imgs/${sec%10}.jpg`);
        }
        timer = setInterval(autoTime, 1000);
    </script>
</body>

</html>